<template lang="html">

    <section class="about">
        <Header>
            <mu-icon value="arrow_back" slot="left" @touchend="back"></mu-icon>
            <span slot="title">关于</span>
        </Header>
        <mu-list>
            <mu-list-item button :ripple="false" @click="$router.push('/useragree')">
                <div class="box">
                    <mu-list-item-action>
                        <mu-icon value="card_giftcard"></mu-icon>
                    </mu-list-item-action>
                    <mu-list-item-title>使用协议</mu-list-item-title>
                    <div class="arrow">
                        <mu-icon value="chevron_right" color="rgba(0, 0, 0, 0.54)"></mu-icon>
                    </div>
                </div>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false" @click="$router.push('/aboutus')">
                <div class="box">
                    <mu-list-item-action>
                        <mu-icon value="card_giftcard"></mu-icon>
                    </mu-list-item-action>
                    <mu-list-item-title>关于我们</mu-list-item-title>
                    <div class="arrow">
                        <mu-icon value="chevron_right" color="rgba(0, 0, 0, 0.54)"></mu-icon>
                    </div>
                </div>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
                <div class="box">
                    <mu-list-item-action>
                        <mu-icon value="card_giftcard"></mu-icon>
                    </mu-list-item-action>
                    <mu-list-item-title>客服电话<span>400-291-3939</span></mu-list-item-title>
                    
                </div>
            </mu-list-item>
            <mu-divider></mu-divider>
        </mu-list>
        <div class="btn">
            <mu-button @click="exit">注销账户</mu-button>
        </div>
        <mu-dialog :open="show" title="提示" transition="scale" overlay :overlay-close="false" width="350px" max-width="80%">
            <div class="mu-modal-content">
                <mu-icon value="priority_high" color="yellow" left></mu-icon>
                <div class="mu-modal-inner">
                    确定要注销账户？
                </div>
            </div>
            <mu-button slot="actions" flat color="primary" textColor="black" @click="close">取消</mu-button>
            <mu-button slot="actions" flat color="primary" @click="logout">确定</mu-button>
        </mu-dialog>
    </section>

</template>

<script lang="js">
    // 引入头部
    import Header from '@/components/Header';
    export default  {
        name: 'about',
        props: [],
        mounted () {

        },
        data () {
            return {
                // 注销按钮弹框
                show: false
            }
        },
        methods: {
            // 后退
            back() {
                this.$router.go(-1);
            },
            // 关闭
            close() {
                this.show = false;
            },
            // 注销按钮
            exit() {
                this.show = true;
            },
            // 确认注销
            logout() {
                // 获取token 
                let token = localStorage.getItem('token');
                let phone = JSON.parse(localStorage.getItem('userInfo')).phone;
                if (token) {
                     // 发送退出登录请求
                    // this.$http.get('/api/user/logout', { params: { token: '' }, headers: { phone, token } })
                    //     // 监听数据返回
                    //     .then(({ data }) => {
                    //         console.log(data)
                    //         if (data.code === 0) {
                    //             // 退出成功后清空localStorage
                    //             localStorage.clear();
                    //             this.$toast.success(data.msg)
                    //             this.$router.push('/login')
                            // } else {
                            //     this.$toast.error(data.msg)
                            // }
                    //     })
                    (async () => {
                        const { data } = await this.$http.get('/api/user/logout', { params: { token: '' }, headers: { phone, token } })
                        if (data.code === 0) {
                            // 退出成功后清空localStorage
                            localStorage.clear();
                            this.$toast.success(data.msg)
                            this.$router.push('/login')
                        } else {
                            this.$toast.error(data.msg)
                        }
                    })()
                } 
            }
        },
        computed: {

        },
        // 注册组件
        components: { Header },
        // 组件加载完成
        created() {
            // 如果没有token则跳转到登录页
            if (!localStorage.getItem('token')) {
                this.$router.replace('/login')
            }
        }
    }


</script>

<style scoped lang="scss">
.about {
  .header {
    position: relative;
    .mu-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    span {
      display: block;
      text-align: center;
    }
  }
  .mu-list {
    li {
      .mu-item {
        display: flex;
        flex-direction: column;
        padding: 0;
        .mu-item-title {
          span {
            color: #ff4081;
            display: inline-block;
            margin-left: 5px;
          }
        }
        .box {
          display: flex;
          width: 100%;
          height: 100%;
          align-items: center;
        }
      }
    }
  }
  .btn {
    width: 100%;
    button {
      display: block;
      width: 100%;
    }
  }
}
.mu-dialog {
  .mu-dialog-body {
    width: 300px;
    .mu-modal-content {
      width: 100%;
      display: flex;
      align-items: center;
      .mu-icon {
        margin-right: 8px;
      }
    }
  }
}
</style>
